<template>
  <view class="content">
    <view class="box" v-if="JSON.stringify(productionResponsibilitySystemData) != '[]'">
      <view v-for="itemPostost in productionResponsibilitySystemData" :key="itemPostost">
        <!-- 岗位名称 -->
        <!-- <view class="positionName" v-if="productionResponsibilitySystemData[0].postName">{{productionResponsibilitySystemData[0].postName}}</view> -->

        <!-- 每一个岗位的职责 -->
        <u-collapse accordion>
          <!-- 履职标准 -->
          <u-collapse-item v-if="itemPostost.type == 1" title="安全生产责任制" class="box-tit">
            <!-- 每一项数据 -->
            <!-- <view class="item" v-for="(item, index) in itemPostost.performanceStandards" :key="item.content"> -->
              <!-- 内容 -->
              <rich-text :nodes="itemPostost.content">
                <!-- <span>{{index + 1}}、</span> -->
              </rich-text>

              <!-- 附件 -->
              <view>
                <u--image v-if="itemPostost.photo.length" :showLoading="true" :src="item.photo" width="80px" height="80px" @click="click"></u--image>
              </view>
            <!-- </view> -->
          </u-collapse-item>

          <!-- 安全生产责任制 -->
          <u-collapse-item v-if="itemPostost.type == 2" title="安全责任清单" class="box-tit">
            <!-- 每一项数据 -->
            <!-- <view class="item" v-for="(item, index) in itemPostost.productionResponsibility" :key="item.content"> -->
              <!-- 内容 -->
              <rich-text :nodes="itemPostost.content">
                <!-- <span>{{index + 1}}、</span> -->
              </rich-text>

              <!-- 附件 -->
              <view>
                <u--image v-if="itemPostost.photo.length" :showLoading="true" :src="itemPostost.photo" width="80px" height="80px" @click="click"></u--image>
              </view>
            <!-- </view> -->
          </u-collapse-item>

          <!-- 安全责任清单 -->
          <u-collapse-item v-if="itemPostost.type == 4" title="履职标准" class="box-tit">
            <!-- 每一项数据 -->
            <!-- <view class="item" v-for="(item, index) in itemPostost.responsibilityChecklist" :key="item.content"> -->
              <!-- 内容 -->
              <rich-text :nodes="itemPostost.content"> 
                <!-- <span>{{index + 1}}、</span> -->
                <!-- {{item.content}} -->
              </rich-text>

              <!-- 附件 -->
              <view>
                <u--image v-if="itemPostost.photo.length" :showLoading="true" :src="itemPostost.photo" width="80px" height="80px" @click="click"></u--image>
              </view>
            <!-- </view> -->
          </u-collapse-item>
        </u-collapse>
      </view>
    </view>
    <view v-else class="empty-block">
      <u-empty text="暂无数据" mode="data" icon-size="80"></u-empty>
    </view>

  </view>
</template>

<script>
/**
 * 引入API请求接口
 * getTheCurrentUserSafetyResponsibilitySystem：获得当前用户安全生产责任制
 * detailsOfTheResponsibilitySystemForProductionSafety：获得岗位获取安全生产责任制详情
 */
import { getTheCurrentUserSafetyResponsibilitySystem, detailsOfTheResponsibilitySystemForProductionSafety } from "@/apis/sCResponsibilities"

export default {
  /**
   * 定义数据
   */
  data () {
    return {
      /* 生产责任制数据 */
      productionResponsibilitySystemData: null,

      /* 是否调用获得当前用户安全生产责任制数据 */
      whetherToCall: true,

      /* 请求携带的参数 */
      params: {
        // 岗位Id
        postId: undefined,
      }
    }
  },

  /**
   * 定义方法
   */
  methods: {

    /* 获得岗位获取安全生产责任制详情 */
    async detailsOfTheResponsibilitySystemForProductionSafety () {
      const req = await detailsOfTheResponsibilitySystemForProductionSafety(this.params)
      if (req instanceof Array ) {
        this.productionResponsibilitySystemData = req
      } else {
        this.productionResponsibilitySystemData = [req]
      }
    }
  },

  /**
   * 小程序路由传参
   */
  onLoad (options) {
    /* 判断路由传参是否岗位Id */
    if (options.postId) {
      // 如果有修改请求方法标识
      this.whetherToCall = false;
      // 给本地岗位Id赋值
      this.params.postId = options.postId
    }
  },

  /**
   * 小程序显示钩子
   */
  onShow() {
    /* 获得岗位获取安全生产责任制详情 */
    this.detailsOfTheResponsibilitySystemForProductionSafety();
  }
};
</script>
<style>
page {
  background-color: #f4f4f4;
}
</style>

<style lang="scss" scoped>
/deep/ .u-cell__title-text {
  color: #ff9800 !important;
}
.content {
  .empty-block {
    padding-top: 300rpx;
  }
  .box {
    width: 100%;
    min-height: 100vh;
    background: #fff;
    .box-tit {
      color: red;
      font-size: 60rpx;
    }

    .positionName {
      line-height: 80rpx;
    }
  }

  .item {
    padding: 20rpx 10rpx;
  }
}
</style>
